<template>
  <div class="bug">
    <div class="top">
      <img src="../../assets/images/cz1.png" alt="" @click="goOption" />
      <p>{{ $t("long.bugfankui") }}</p>
    </div>
    <div class="rule">
      <img src="../../assets/images/buga.png" alt="" />
      <div class="rulert">
        <div class="ruletitle">{{ $t("long.bugye1") }}</div>
        <div class="rulecontent">
          <div>
            <p>{{ $t("long.bugye2") }}</p>
            <p>10 USDT</p>
          </div>
          <div>
            <p>{{ $t("long.bugye3") }}</p>
            <p>30 USDT</p>
          </div>
          <div>
            <p>{{ $t("long.bugye4") }}</p>
            <p>50 USDT</p>
          </div>
          <div>
            <p>{{ $t("long.bugye5") }}</p>
            <p>1000 USDT</p>
          </div>
          <div>
            <p>{{ $t("long.bugye6") }}</p>
            <p>2000 USDT</p>
          </div>
        </div>
      </div>
    </div>
    <p class="title">{{ $t("long.bugye7") }}</p>
    <div class="main">
      <div class="form">
        <van-button
          @click="subform.feedbackType = index"
          v-for="(item, index) in form"
          :class="subform.feedbackType === index ? 'blue' : 'grey'"
          :key="index"
          >{{ item }}</van-button
        >
      </div>
      <van-field
        class="field"
        v-model="subform.problemDescription"
        rows="2"
        type="textarea"
        maxlength="300"
        :placeholder="$t('long.bugye8')"
        show-word-limit
      />
      <!-- <van-uploader
        :upload-icon="fileList.length === 0 ? uploading1 : uploading2"
        v-model="fileList"
        accept="*"
        max-count="4"
        class="uploading"
        multiple
      /> -->
      <van-uploader
        v-model="fileList"
        :upload-icon="fileList.length === 0 ? uploading1 : uploading2"
        class="uploading"
        accept="*"
        max-count="4"
        preview-full-image
        :after-read="afterRead"
        @delete="uploadelete"
        @click-preview="handleclicksc"
        :preview-options="{
          closeable: true,
        }"
      >
        <template #preview-cover="{ file }">
          <div v-if="file.type.indexOf('video') !== -1" class="none-box">
            <!-- <img :src="require('../../assets/images/video.png')" /> -->
            <!-- <p style="color: red">{{ file.name }}</p> -->
            <!-- <p
              style="color: red"
              v-for="(item, index) in fileList"
              v-show="fileList[index].file.name === file.name"
              :key="index"
            >
              {{ fileList[index].file.name }} -->
            <!-- </p> -->
            <video
              v-for="(item, index) in fileList"
              v-show="fileList[index].file.name === file.name"
              :key="index"
              style="width: 21.4vw; height: 21.4vw; object-fit: cover"
              :src="fileList[index].content"
            ></video>
            <!-- :src="fileList[index].content" -->
          </div>
          <!-- <div v-else></div> -->
        </template>
      </van-uploader>
      <van-button
        class="tijiao"
        :class="subform.problemDescription.length >= 6 ? 'blue' : 'grey1'"
        @click="submit"
        >{{ $t("common.tijiao") }}</van-button
      >
    </div>
    <p class="title">{{ $t("long.bugye7") }}</p>
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="$t('long.meiyougengduo')"
      @load="onLoad"
    >
      <div class="history" v-for="(item, index) in historylist" :key="index">
        <div v-if="feedback_type[item.feedbackType]">
          <TextOverflow
            class="histcontent"
            :text="item.problemDescription"
            :feedback_type="feedback_type[item.feedbackType].description"
            :feedback_state="feedback_state[item.state].description"
            :width="94"
            :maxLines="6"
          >
            <template v-slot:default="{ clickToggle, expanded }">
              <p
                style="color: #0a7aff; margin-left: 1vw"
                @click="clickToggle"
                class="btn"
              >
                {{ expanded ? $t("long.bugye10") : $t("long.bugye11") }}
              </p>
            </template>
          </TextOverflow>
          <p class="histtime">{{ item.createTime }}</p>

          <div class="histimg">
            <div v-for="(item1, index1) in item.image1" :key="index1">
              <img
                v-if="/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item1)"
                @click="handleclicksc2(item.image1, index1)"
                :src="
                  'https://rippleexchanges.oss-cn-chengdu.aliyuncs.com/' + item1
                "
                alt=""
              />
              <video
                v-if="/(.*)\.(mp4|rmvb|avi|ts)$/.test(item1)"
                @click="handleclicksc1(item1)"
                style="width: 20.533vw; height: 20.533vw"
                :poster="
                  'https://rippleexchanges.oss-cn-chengdu.aliyuncs.com/' +
                  item1 +
                  '?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'
                "
                :src="
                  'https://rippleexchanges.oss-cn-chengdu.aliyuncs.com/' + item1
                "
              ></video>
            </div>
          </div>
          <p class="histreply" v-if="item.writeBack">
            {{ $t("long.bugye12") }}{{ item.writeBack }}
          </p>
        </div>
      </div>
    </van-list>
    <div></div>
    <van-dialog
      style="width: 100%; border-radius: 0; height: 200px"
      theme="default"
      v-model="showvideoplay"
      :show-cancel-button="false"
      :show-confirm-button="false"
      closeOnClickOverlay
    >
      <video
        controls
        preload="auto"
        style="width: 100%; height: 200px; object-fit: contain"
        :src="videourl"
        v-if="videourl"
      ></video>
    </van-dialog>
  </div>
</template>
<script>
import TextOverflow from '../../components/textoverflow.vue'
import axios from 'axios'
import { mapGetters } from "vuex"
import { ImagePreview } from 'vant'
import { Toast } from 'vant'
import moment from "moment"
export default {
  data () {
    return {
      content: '',
      message: '',
      form: ['功能Bug', '安全漏洞', '产品建议'],
      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // // Uploader 根据文件后缀来判断是否为图片文件
        // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg', isImage: true },
      ],
      fileList1: [],
      videourl: null,
      imglist: ['', '', '', ''],
      uploading1: require('../../assets/images/uploading1.png'),
      uploading2: require('../../assets/images/uploading2.png'),
      historylist: [''],
      feedback_type: [],
      feedback_state: [],
      loading: false,
      finished: false,
      showvideoplay: false,
      userInfo: null,
      subform: {
        feedbackType: 0,
        image: '',
        problemDescription: '',
        state: 0,
      },
      text: '',
      shangchuanstate: null,
      // reg:/\.(png|jpg|gif|jpeg|webp)$/
    }
  },

  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  watch: {
  },
  components: {
    TextOverflow,
  },
  async activated () {
    // ImagePreview(['https://rippleexchanges.oss-cn-chengdu.aliyuncs.com/dc72ab6844bf4454902ff9c2e915db26.png'])
    this.feedback_type = await this.$getDict("feedback_type")
    // this.form = this.feedback_type.map(obj => { return obj.description })
    this.form = [this.$t('long.bugye18'),this.$t('long.bugye19'),this.$t('long.bugye20')]
    this.feedback_state = await this.$getDict("feedback_state")
    this.userInfo = this.getUserInfo
    // console.log(this.userInfo)
    this.hislist()
  },
  methods: {
    // 历史列表
    async hislist () {
      const ret = await this.$http({
        url: "/system/feedback/app/getUserFeedbackList",
        method: "get",
      })
      if (ret.data.code === 0) {
        this.historylist = ret.data.data
        for (let i = 0; i < this.historylist.length; i++) {
          if (this.historylist[i].image !== null) {
            this.historylist[i].image1 = this.historylist[i].image.split(',')
          }
        }
        // console.log(this.historylist)
      }
    },
    goOption () {
      this.$router.go('-1')
    },
    //上传
    afterRead (file, name) {
      this.shangchuanstate = null
      file.status = 'uploading'
      file.message = this.$t('long.bugye13')
      if (file.file.type.indexOf('video') !== -1 || file.file.type.indexOf('image') !== -1) {
        // console.log(this.fileList)
      } else {
        this.fileList.pop()  //单张上传
        Toast(this.$t('long.bugye14'))
        console.log(this.fileList)
        return
      }
      // for (let i = 0; i < this.fileList.length; i++) {
      //   console.log(i)
      // }
      let fileList = [...this.fileList]
      fileList.pop()
      if (!fileList.every((item, index, array) => {
        return item.file.lastModified !== file.file.lastModified
      })) {
        this.fileList.pop()  //重复
        Toast(this.$t('long.bugye15'))
        // console.log(this.fileList)
        return
      }
      // this.uploadImgFun(file.content, file.file.type.slice(6))
      let formData = new FormData()
      formData.append("file", this.dataURLtoFileFun(file.content, "file." + file.file.type.slice(6)))
      axios({
        method: 'post',
        url: '/api/admin/sys-file/upload',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data', // 关键
          'Authorization': `Bearer ${this.userInfo.access_token}`
        },
      }).then((res) => {
        this.fileList1.push(res.data.data.fileName)
        file.status = 'done'
        //
      }).catch((res) => {
        file.status = 'failed'
        file.message = this.$t('long.bugye16')
      })
    },
    uploadelete (file, detail) {
      this.fileList1.splice(detail.index, 1)
      console.log(this.fileList1)
    },
    //视频预览
    handleclicksc (file) {
      console.log(file)
      if (file.file.type.indexOf('video') !== -1) {
        this.videourl = file.content
        this.showvideoplay = true
      }
    },
    //视频预览
    handleclicksc1 (val) {
      console.log(val)
      this.videourl = 'https://rippleexchanges.oss-cn-chengdu.aliyuncs.com/' + val
      this.showvideoplay = true
    },
    handleclicksc2 (val, val2) {
      // console.log(val.slice(0,val2))
      // console.log(val2)
      var newArrays = val.slice(0, val2).filter(function (res) {
        return /(.*)\.(mp4|rmvb|avi|ts)$/.test(res)
      })
      let val3 = val2 - newArrays.length
      console.log(val)
      let newArr = val.map(function (index) {
        return 'https://rippleexchanges.oss-cn-chengdu.aliyuncs.com/' + index
      })
      let val1 = newArr.filter(item => /(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item))
      // console.log(val1)
      // let val1 = []
      // val1.push('https://rippleexchanges.oss-cn-chengdu.aliyuncs.com/' + val)
      ImagePreview({ images: val1, closeable: true, startPosition: val3 })
    },
    // 历史列表
    onLoad () {
      this.loading = false
      this.finished = true
    },
    // 回调：组件选择图片成功后的回调函数
    // async uploadImgFun (content, geshi) {
    //   // console.log(content)
    // },
    // bae64转文件对象
    dataURLtoFileFun (dataurl, filename) {
      // 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
      let arr = dataurl.split(",")
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    async submit () {
      if (this.subform.problemDescription.length < 6) {
        Toast(this.$t('long.bugye8'))
        return
      }
      this.subform.image = this.fileList1.join(',')
      const ret = await this.$http({
        url: "/system/feedback/app/saveUserFeedback",
        method: "post",
        data: this.subform
      })
      if (ret.data.code === 0) {
        this.subform.feedbackType = 0
        this.subform.problemDescription = ''
        this.subform.image = ''
        this.fileList = []
        this.fileList1 = []
        Toast(this.$t('long.bugye17'))
        this.hislist()
      }
    },
  },
}
</script>
<style scoped lang="scss">
.bug {
  margin: 0;
  padding: 0 13px;
  text-align: left;
  .top {
    height: 11.73vw;
    // width: 100vw;
    background-color: #090A1B;
    display: flex;
    align-items: center;
    //font-family: Microsoft Yahei;
    img {
      height: 5.3vw;
      width: 5.3vw;
      left: 2.4vw;
      position: absolute;
    }
    p {
      font-size: 4.8vw;
      color: rgba(255, 255, 255, 100);
      position: relative;
      margin: 0 auto;
      letter-spacing: 0.2vw;
    }
  }
  .rule {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    img {
      width: 145px;
    }
    .rulert {
      width: 190px;
      .ruletitle {
        font-size: 14px;
        color: #0a7aff;
        margin-bottom: 14px;
      }
      .rulecontent {
        > div {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          p:last-child {
            font-weight: bold;
          }
        }
      }
    }
  }
  .title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .main {
    .form {
      display: flex;
      justify-content: space-between;
      margin-bottom: 19px;
      button {
        width: 104px;
        height: 32px;
      }
    }
    :deep(.field) {
      background-color: #171A2B;
      width: auto;
      height: 187px;
      margin-bottom: 16px;
      .van-field__control {
        color: #fff;
        height: 150px;
      }
      .van-field__control::-webkit-input-placeholder {
        color: #8992AE;
      }
      .van-field__word-limit {
        color: #8992AE;
      }
    }
    .field::after {
      border-bottom: 0;
    }
    :deep(.uploading) {
      margin-bottom: 22px;
      .van-uploader__wrapper {
        > div {
          // width: 79px;
          margin-right: 9.6px;
        }
        > div:last-child {
          margin-right: 0;
        }
        .van-uploader__upload {
          background-color: #171A2B;
          .van-icon__image {
            width: 30px;
            height: auto;
          }
        }
        .none-box {
          width: 80px;
          height: 80px;
          overflow: hidden;
          img {
            width: 80px;
          }
        }
        .van-uploader__preview-delete {
          width: 20px;
          height: 20px;
          position: absolute;
          top: -4px;
          right: -4px;
          background-color: #8992AE;
          border-radius: 3.2vw;
          .van-uploader__preview-delete-icon {
            font-size: 26px;
            font-weight: bold;
            top: -3px;
            right: -3px;
            color: #171A2B;
          }
        }
      }
    }
    .tijiao {
      width: 343px;
      height: 36px;
      display: block;
      margin: 0 auto 33px;
      // background-color: #0A7AFF 100%;
    }
  }
  .history {
    margin-bottom: 37px;
    .histtime {
      color: #8992AE;
      margin: 8px 0;
    }
    .histimg {
      display: flex;
      div {
        margin-right: 2.56vw;
      }
      div:last-child {
        margin-right: 0;
      }
      img {
        width: 77px;
        height: 77px;
        margin-right: 13.6px;
      }
      img:last-child {
        margin-right: 0;
      }
    }
    .histreply {
      margin-top: 16px;
    }
  }

  .grey {
    color: #8992AE;
    background: #171A2B;
    border-color: #171A2B;
  }
  .grey1 {
    color: white;
    background: #8992AE;
    border-color: #8992AE;
  }
  .blue {
    color: white;
    background: #0a7aff;
    border-color: #0a7aff;
  }
}
</style>
